<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        html,
        body {
            padding: 0;
            margin: 0;
        }

        #box {
            width: 500px;
            height: 250px;
            background-color: lightskyblue;
            position: relative;
            display: flex;
            justify-content: space-around;
            align-items: center;
            overflow: hidden;
        }

        #square {
            width: 50px;
            height: 50px;
            background-color: yellow;
            position: absolute;
            left: 0;
            top: 0;
        }

        .btn {
            width: 40px;
            height: 30px;
            line-height: 30px;
            color: black;
            border-radius: 4px;
            background-color: wheat;
            text-align: center;
        }

        #linear {
            left: 100px;
        }

        #back {
            left: 200px;
        }

        #loop {
            left: 300px;
        }

        .btn:hover {
            opacity: .8;
        }
    </style>
</head>

<body>
    <div id="box">
        <div id="square"></div>
        <div class="btn" id="linear">匀速</div>
        <div class="btn" id="back">折返</div>
        <div class="btn" id="loop">转圈</div>
        <div class="btn" id="acc">加速</div>
        <div class="btn" id="slow">减速</div>
    </div>
</body>
<script>
    function $(id) {
        return document.getElementById(id);
    }
    function getStyle(element, attr) {
        return parseInt(element.currentStyle ? element.currentStyle[attr] : getComputedStyle(element, null)[attr]);  //带px的字符串
    }
    var speed = 50
    let linear = $('linear')
    let box = $('box')
    let back = $('back')
    let loop = $('loop')
    let square = $('square')
    let acc = $('acc')
    let slow = $('slow')
    const maxX = box.offsetWidth - square.offsetWidth    //能走的X方向的最大距离
    const maxY = box.offsetHeight - square.offsetHeight //能走的Y方向的最大距离
    console.log(maxX, maxY)
    //匀速往右
    linear.onclick = function () {
        clearInterval(square.timer)
        square.timer = setInterval(function () {
            square.style.left = square.offsetLeft + speed + 'px'
            var left = parseInt(getStyle(square, 'left'))
            if (left >= maxX || left < 0) {
                square.style.left = 0    //越界就归位
                clearInterval(square.timer)
            }
        }, 50)
    }
    //匀速折返
    back.onclick = function () {
        clearInterval(square.timer)
        let pre = 1
        square.timer = setInterval(function () {
            square.style.left = square.offsetLeft + pre*speed + 'px'
            var left = parseInt(getStyle(square, 'left'))
            if (left > maxX || left < 0) {
                pre = -pre  
                // speed = -speed    //越界就取反向速度，这里为了不影响全局的speed就用了个pre
            }
        }, 50)
    }
    //匀速转圈(顺时针)
    loop.onclick = function () {
        clearInterval(square.timer)
        square.timer = setInterval(function () {   //这种方式就可以完整实现顺时针旋转
            var left = parseInt(getStyle(square, 'left'))
            var top = parseInt(getStyle(square, 'top'))
            if (left < 0 || left > maxX || top < 0 || top > maxY) {  //如果方块意外出格，拉回来
                square.style.left = 0
                square.style.top = 0
            }
            if (left < maxX && !top) {                         //左上角
                square.style.left = square.offsetLeft + speed + 'px'
            } else if (top < maxY && left == maxX) {          //右上角
                square.style.top = square.offsetTop + speed + 'px'
            } else if (left > 0 && top == maxY) {                  //右下角
                square.style.left = square.offsetLeft - speed + 'px'
            } else if (top > 0 && !left) {                   //左下角
                square.style.top = square.offsetTop - speed + 'px'
            }
        }, 50)
    }
    //加速
    acc.onclick = function () {
        clearInterval(square.timer)
        square.timer = setInterval(function () {
            let speed = (square.offsetLeft + 5) / 10    //核心
            if (square.offsetLeft > maxX) {
                clearInterval(square.timer)
                square.style.left = 0
            } else {
                square.style.left = square.offsetLeft + speed + 'px'
            }
        }, 50)
    }
    //减速
    slow.onclick = function () {
        clearInterval(square.timer)
        square.timer = setInterval(function () {
            let speed = (maxX - square.offsetLeft) / 10   //核心
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);   //使speed大于0（正向）或小于0(反向)时速度不会取到0
            console.log(speed)
            if (Math.abs(square.offsetLeft - maxX) <= 0) {
                clearInterval(square.timer)
                square.style.left = 0
            } else {
                square.style.left = square.offsetLeft + speed + 'px'
            }
        }, 50)
    }
</script>

</html>